<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>实验</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript" src="${path}/static/jquery/jquery-1.9.1.min.js"></script>
	<link rel="stylesheet" href="${path}/js/resource/bootstrap.min.js">
	<link rel="stylesheet" href="${path}/css/resource/bootstrap.min.css">
	<link rel="stylesheet" href="${path}/css/resource/bootstrap.css">
	<style>
		#maskDIV {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.3;
			/*兼容IE8及以下版本浏览器*/
			filter: alpha(opacity=30);display:none;
			bottom: 0;
			background-color: #393939}
		#maskRebootDIV {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.3;
		/*兼容IE8及以下版本浏览器*/
		filter: alpha(opacity=30);display:none;
		bottom: 0;
		background-color: #393939}
		#maskDIVDelete {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.3;
			/*兼容IE8及以下版本浏览器*/
			filter: alpha(opacity=30);display:none;
			bottom: 0;
			background-color: #393939}
		#time{padding:15px 15px 15px 30px;color: #97530e;}
		.btnp{  color:#FFF;background:#45aeea; border-radius:5px !important; margin:20px 15px 20px 0;}
		.selectstyle{ margin:20px 15px 20px 0;}
		#conleft{height:599px; overflow-y:scroll; overflow-x:scroll;}
		.bor{border:1px solid #CCC;  }
		#top{border-top: none!important; border-left: none !important;}
		textarea{width: 360px;height: 580px;}

		.col-lg-3-lable1{
			text-align:center
			width: 100%;
			height: 50px;
			/*background-color: #0072c6;*/

		}
		.col-lg-3-lable1 div{
			width: 100%;
			/*height: 50px;*/
			line-height: 50px;
			color: #97530e;
            font-size: 24px;
			/*margin-left: 50px;*/
			text-align:center
			/*background-color: #000033;*/
		}


		.col

		/*.select { margin: 0; padding: 0; border:1px solid #cccccc; float: left; display: inline; }*/
		/*.select div { border:1px solid #f9f9f9; float: left; }*/
		/*.select>div { overflow: hidden; }*/
		/** html .select div select { display:block; float: left; margin: -2px; }*/
		/*.select div>select { display:block; float:none; margin: -2px; padding: 0px; }*/
		/*.select:hover { border:1px solid #666; }*/
	</style>

	<script type="text/javascript">
		var timeDifference = ${timeDifference};
		function GetRTime() {
//			var endTime=$("#endTime").val();2017/05/16 20:27:30
			var endTime = document.getElementById('endTime').value;
//			var endTime1=$("#endTime").val();
//			alert("1----" + endTime);
//			alert("2----" + endTime1);
			<%--alert("3----" + ${endTime});--%>

//			alert("== " + endTime);
//			alert("1=====:" + endTime);

			var EndTime = new Date(endTime);
			var NowTime = new Date();

			timeDifference = timeDifference - 1000;
			var d = 0;
			var h = 0;
			var m = 0;
			var s = 0;
			if (timeDifference >= 0) {
				d = Math.floor(timeDifference / 1000 / 60 / 60 / 24);
				h = Math.floor(timeDifference / 1000 / 60 / 60 % 24);
				m = Math.floor(timeDifference / 1000 / 60 % 60);
				s = Math.floor(timeDifference / 1000 % 60);
			} else {
				var id = document.getElementById('sceneEnvironmentInstanceId').value;
//				var id="1234";
				clearInterval(auto);
//				alert("2=====:" + endTime);
				end(id);
			}
			if (d < 10)
				d = "0" + d;
			if (h < 10)
				h = "0" + h;
			if (m < 10)
				m = "0" + m;
			if (s < 10)
				s = "0" + s;
			document.getElementById("t_d").innerHTML = d;
			document.getElementById("t_h").innerHTML = h;
			document.getElementById("t_m").innerHTML = m;
			document.getElementById("t_s").innerHTML = s;
		}

		$(document).ready(function() {
			<%--alert("ready:"+"${vmUrlList[0].consoleUrl}");--%>
			document.getElementById('fullScreenConsoleUrl').value="${vmList[0].consoleUrl}";
			document.getElementById('sceneEnvironmentInstanceId').value="${sceneEnvironmentInstance.id}";
			document.getElementById('endTime').value="${endTime}";
			document.getElementById('vmIdChoose').value="${vmList[0].vmTemplateId}";
			document.getElementById('sceneEnvironmentId').value="${sceneEnvironment.id}";
			document.getElementById('increaseTime').value="${increaseTime}";
			document.getElementById('increaseNumber').value="${increaseNumber}";

			//防止页面后退
			history.pushState(null, null, document.URL);
			window.addEventListener('popstate', function () {
				history.pushState(null, null, document.URL);
			});
			timeDifference = ${timeDifference};


			auto = setInterval(GetRTime, 1000);

		});
	</script>
	<script type="text/javascript">

		function rebootServer()
		{
			var vmId=document.getElementById('vmIdChoose').value;
			var s = window.parent.document.getElementById("maskRebootDIV");
			s.style.display = "block";
			$.ajax({
				type: "POST",
				url: "${ctx}/scene/sceneEnvironmentInstance/rebootServer",
				async: false,
				data: {
					ids:vmId
				},
				success: function (url) {
					//关闭遮罩
					var s = window.parent.document.getElementById("maskRebootDIV");
					s.style.display = "none";
					if(url!=null&&url!='') {
						document.getElementById('consoleIframe').src = url;
						document.getElementById('fullScreenConsoleUrl').value=url;

					}
//					window.location.href=url;
				},
				error:function(){
					//关闭遮罩
					var s = window.parent.document.getElementById("maskRebootDIV");
					s.style.display = "none";
					alert("重启虚拟机失败");
				}
			});

		}
		function redoExperiment(instanceId,environmentId)
		{

			if(confirm("确定要重做实验？")){
				var s = window.parent.document.getElementById("maskDIV");
				s.style.display = "block";
				$.ajax({
					type: "POST",
					url: "${ctx}/scene/sceneEnvironmentInstance/redoExperiment",
					data: {
						instanceId:instanceId,
						environmentId:environmentId
					},
					success: function (instanceId) {
						//关闭遮罩
						var s = window.parent.document.getElementById("maskDIV");
						s.style.display = "none";
						window.location.href="${ctx}/scene/sceneEnvironmentInstance/toExperimentOperate?instanceId="+instanceId;
						<%--window.open("${ctx}/scene/sceneEnvironmentInstance/toExperimentOperate?courseId="+courseId+"&coursewareId="+coursewareId+"&instanceId="+instanceId,"_blank");--%>

					},
					error:function(){
						//关闭遮罩
						var s = window.parent.document.getElementById("maskDIV");
						s.style.display = "none";
						alert("重做实验失败");
					}
				});
			}


		}

		function endExperiment(id)
		{

//			alert("id:"+id);
			if(confirm("确定要结束实验？")){

				var s = window.parent.document.getElementById("maskDIVDelete");
				s.style.display = "block";
				$.ajax({
					type: "POST",
					url: "${ctx}/scene/sceneEnvironmentInstance/endExperiment",
					data: {
						instanceId:id
					},
					success: function () {
						clearInterval(auto);
						var s = window.parent.document.getElementById("maskDIVDelete");
						s.style.display = "none";
//						window.history.go(-1);
						window.opener=null;window.open('','_self');window.close();
					},
					error:function(){
						var s = window.parent.document.getElementById("maskDIVDelete");
						s.style.display = "none";
						alert("未能结束实验");
					}
				});

			}


		}

		function end(id)
		{

			alert("实验时间已结束！");
			var s = window.parent.document.getElementById("maskDIVDelete");
			s.style.display = "block";
			$.ajax({
				type: "POST",
				url: "${ctx}/scene/sceneEnvironmentInstance/endExperiment",
				data: {
					instanceId:id
				},
				success: function () {
					var s = window.parent.document.getElementById("maskDIVDelete");
					s.style.display = "none";
//						window.history.go(-1);
					window.opener=null;window.open('','_self');window.close();
				},
				error:function(){
					var s = window.parent.document.getElementById("maskDIVDelete");
					s.style.display = "none";
					alert("未能结束实验");
				}
			});

		}

		function vmChoose(selete)
		{
			var vmId=selete.options[selete.selectedIndex].value;

			$.ajax({
				type: "POST",
				url: "${ctx}/scene/sceneEnvironmentInstance/getVmUrl",
				data: {
					vmId:vmId
				},
				success: function (consoleUrl) {
					if(consoleUrl!=null&&consoleUrl!="")
					{
						document.getElementById('vmIdChoose').value=vmId;
						document.getElementById('consoleIframe').src=consoleUrl;
						document.getElementById('fullScreenConsoleUrl').value=consoleUrl;
					}

				},
				error:function(){

				}
			});


		}
		function fullScreenHref(){
//			alert("fullScreen");
//			var fullScreenConsoleUrl=$("#fullScreenConsoleUrl").val();
			var fullScreenConsoleUrl=document.getElementById("fullScreenConsoleUrl").value;
//			alert("fullScreenConsoleUrl:"+fullScreenConsoleUrl);

			<%--document.getElementById("fullScreenA").href="${ctx}/scene/sceneEnvironmentInstance/fullScreenConsole?fullScreenConsoleUrl="+fullScreenConsoleUrl;--%>
			document.getElementById("fullScreenA").href=fullScreenConsoleUrl;

		}
		function addTime() {
			var addTimeNumber=document.getElementById("addTimeNumber").value;
			var increaseNumber=document.getElementById("increaseNumber").value;
//			alert(parseInt(addTimeNumber)+" "+parseInt(increaseNumber));
			if(parseInt(addTimeNumber)>=parseInt(increaseNumber))
			{	$('#addTimeA').removeAttr('onclick');
				document.getElementById("addTimeA").style.color="#909090";
				alert("延长时间次数已用尽");
			}else{
				clearInterval(auto);
				var sceneEnvironmentId=document.getElementById("sceneEnvironmentId").value;
				var sceneEnvironmentInstanceId=document.getElementById("sceneEnvironmentInstanceId").value;
				$.ajax({
					type: "POST",
					url: "${ctx}/scene/sceneEnvironment/addTime",
					data: {
						sceneEnvironmentId:sceneEnvironmentId,
						sceneEnvironmentInstanceId:sceneEnvironmentInstanceId
					},
					success: function (endTime) {

						var num=parseInt(addTimeNumber)+1;

						if(num==increaseNumber)
						{
							$('#addTimeA').removeAttr('onclick');
							document.getElementById("addTimeA").style.color="#909090";
						}
						document.getElementById("addTimeNumber").value=num;
//						document.getElementById("endTime").value=endTime;
						timeDifference = endTime;
						auto = setInterval(GetRTime, 1000);

					},
					error:function(){

						alert("延长时间失败");

					}
				});

			}
		}


	</script>

	<script language="javascript">
		//防止页面后退
		history.pushState(null, null, document.URL);
		window.addEventListener('popstate', function () {
			history.pushState(null, null, document.URL);
		});
	</script>


	<script type="text/javascript">

		window.onload = myfun;

		function myfun() {
			var divs = document.getElementById("div-ton");
//			alert(screen.height);
//			alert(divs.offsetHeight);
			document.getElementById("div-ton").style.height =  screen.height-200 + "px";
		}


	</script>
<%--<script type="text/javascript">--%>
		<%--window.onbeforeunload = onbeforeunload_handler;--%>
		<%--window.onunload = onunload_handler;--%>
		<%--function onbeforeunload_handler(){--%>
			<%--var warning="确认退出?";--%>
			<%--return warning;--%>
		<%--}--%>

		<%--function onunload_handler(){--%>
			<%--var sceneEnvironmentInstanceId=document.getElementById('sceneEnvironmentInstanceId').value;--%>
			<%--$.ajax({--%>
				<%--type: "POST",--%>
				<%--url: "${ctx}/scene/sceneEnvironmentInstance/endExperiment",--%>
				<%--data: {--%>
					<%--instanceId:sceneEnvironmentInstanceId--%>
				<%--},--%>
				<%--success: function () {--%>
				<%--},--%>
				<%--error:function(){--%>
				<%--}--%>
			<%--});--%>
		<%--}--%>
	<%--</script>--%>

</head>
<body onunload="checkLeave()">

<%--<div style="width: 100%;height: 100%; background-color: #0033CC">--%>

<form:form id="inputForm" action="${ctx}/scene/sceneEnvironmentInstance/redoExperiment" method="post" class="form-horizontal" enctype="multipart/form-data">
	<input type="hidden" value="${courseId}" id="courseId" name="courseId"/>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-10 bor">
				<lable id="time">
					剩余时间：   
						<span id="t_d">00</span>天
					 	<span id="t_h">00</span>时
					    <span id="t_m">00</span>分
					    <span id="t_s">00</span>秒
				</lable>


				<div class="btn-group pad">
					<c:if test="${increaseNumber!=null}">
						<a href="#" class="btn btnp" id="addTimeA" name="addTimeA" onclick="addTime()">延长时间(${increaseTime}分钟/${increaseNumber}次)</a>
					</c:if>
					<a class="btn btnp" onclick="redoExperiment('${sceneEnvironmentInstance.id}','${sceneEnvironment.id}')">重做实验</a>
					<a class="btn btnp" onclick="endExperiment('${sceneEnvironmentInstance.id}')">结束实验</a>
					<a class="btn btnp" onclick="rebootServer()">重启</a>
					<a class="btn btnp" href="${ctx}/scene/sceneEnvironmentInstance/topologyShow?environmentId=${sceneEnvironment.id}" target="_blank">场景拓扑图</a>
					<a class="btn btnp" href="" id="fullScreenA" onclick="fullScreenHref()" target="_blank">全屏</a>


								<%--${sceneEnvironmentInstance.id},${sceneEnvironment.id},${courseId}--%>
						<%--<button class="btn btnp" type="button" onclick="window.location.href='${ctx}/scene/sceneEnvironmentInstance/redoExperiment?instanceId=1&environmentId=2&courseId=3'">重做实验</button>--%>
						<%--<button class="btn btnp" type="button" onclick="endExperiment(${sceneEnvironmentInstance.id})">结束实验</button>--%>
						<%--<button class="btn btnp" type="button" onclick="rebootServer(${sceneEnvironmentInstance.id})">重启</button>--%>
						<%--<button class="btn btnp" type="button" onclick="window.location.href='https://www.baidu.com/'">场景拓扑图</button>--%>
						<%--<button class="btn btnp" type="button">？</button>--%>
				</div>

				<select id="operateMachineSelect" name="operateMachineSelect" onchange="vmChoose(this)">
					<c:forEach items="${vmList}" var="vm">
						<option value="${vm.vmTemplateId}">${vm.vmName}</option>
					</c:forEach>
				</select>
				<label style="padding:15px 15px 15px 30px;color: #97530e;">${coursewareName}</label>
			</div>
		</div>
		<div id="div-ton" class="row" style="height: 900px;" <%--background-color: #00ee00--%>>
			<div class="col-lg-3 bor" style="height: 100%; width: 25%">
				<div class="col-lg-3-lable1">
				<div   <%--id="time"--%> <%-- style="width: 300px; height: 30px; text-algin:center; background-color: #0033CC"--%> >
					实验指导说明
				</div>
				</div>
				<div id="conleft"  style="height: 92%">
						<%--<form:textarea htmlEscape="false" path="document" rows="4" id="content" maxlength="100" class="input-xxlarge"/>--%>
						<%--<sys:ckeditor replace="document" uploadPath="/itemDescribe" />--%>
						<%--<textarea/>--%>
						<%--${document}--%>
						<%--</textarea>--%>
								${resourceCourseware.document}
					<%--<textarea  disabled="disabled"  htmlEscape="false" path="document" style="width: 100%;height: 100% "  name="eduhistory" cols="30" rows="4" align="center">${document}</textarea>--%>
					<%--<textarea disabled="disabled" htmlEscape="false" path="document" rows="4" &lt;%&ndash;id="document"&ndash;%&gt; &lt;%&ndash;name="document"&ndash;%&gt; >${document}</textarea>--%>
					<%--<sys:ckeditor replace="document" uploadPath="/itemDescribe"/>--%>
				</div>
			</div>
			<div class="col-lg-7 bor" id="top" style="height: 100% ;width: 75%; /*background-color: #0000ee*/">
				<!--               <h2>
                                标题
                              </h2>
                              <p>
                                 本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
                              </p>
                              <p>
                                 <a class="btn" href="#">查看更多 »</a>

                              </p> -->
					<%--//${sceneEnvironmentInstance.url}--%>
				<iframe src="${vmList[0].consoleUrl}" width="100%" height="100%"  <%--width="950" height="620"--%> id="consoleIframe" name="consoleIframe" onload="consoleIframe.focus()"></iframe>
			</div>
			<input type="hidden" id="sceneEnvironmentId" name="sceneEnvironmentId"　value="${sceneEnvironment.id}"/>
			<input type="hidden" id="sceneEnvironmentInstanceId" name="sceneEnvironmentInstanceId"　value="${sceneEnvironmentInstance.id}"/>
			<input type="hidden" id="endTime" name="endTime"　value="${endTime}"/>
			<input type="hidden" id="vmIdChoose" value="${vmList[0].vmTemplateId}"/>
			<input type="hidden" id="increaseTime" name="increaseTime" value="${increaseTime}">
			<input type="hidden" id="addTimeNumber" name="addTimeNumber" value="0">
			<input type="hidden" id="increaseNumber" name="increaseNumber" value="${increaseNumber}">
			<input type="hidden" id="fullScreenConsoleUrl" name="fullScreenConsoleUrl"　value="${vmList[0].consoleUrl}"/>
		</div>
	</div>
</form:form>
<div id='maskRebootDIV'><i class='icon-spinner icon-spin white' style='font-size:550%;position: relative;top: 47%;left: 48%;'></i>" +
	"<span style='position: relative;color: white;top: 50%;left:39%;font-size:20px;'>重启中...</span></div>
<div id='maskDIV'><i class='icon-spinner icon-spin white' style='font-size:550%;position: relative;top: 47%;left: 48%;'></i>" +
	"<span style='position: relative;color: white;top: 50%;left:39%;font-size:20px;'>实验环境创建中...</span></div>
<div id='maskDIVDelete'><i class='icon-spinner icon-spin white' style='font-size:550%;position: relative;top: 47%;left: 48%;'></i>" +
	"<span style='position: relative;color: white;top: 50%;left:39%;font-size:20px;'>正在结束实验...</span></div>
<%--</div>--%>

<script type="text/javascript">
	//监听页面刷新
	//			window.onbeforeunload=function (){
	//				if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
	//					alert("你正在试图关闭浏览器");
	//	//				return "你正在试图关闭浏览器？";
	//				}else{
	//	//				alert("你正在刷新页面");
	//					return "你是否刷新此界面重做该实验？";
	//				}
	//			}

	//	window.onbeforeunload = function(event) { return confirm("确定离开此页面吗？"); }
</script>


</body>
</html>